<!--
 * @Description: 协议管理主页
 * @version: 电子名片2.0
 * @Author: 付小清
 * @Date: 2020-10-30 14:25:17
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-27 17:26:27
-->

<template>
  <div class="mainbox">
    <div id="protoColSetContent" class="table-box">
      <el-tabs v-model="tabVal" @tab-click="tabClick">
        <el-tab-pane
          v-for="(item, index) in tabList"
          :key="index"
          :label="item.label"
          :name="item.value"
        />
      </el-tabs>
      <!-- 富文本 -->
      <div id="div1" />
      <div style="text-align:center">
        <el-button style="margin-top:15px" type="primary" @click="submitForm()">
          保存
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
// 王编辑器插件引入
import E from 'wangeditor'
// 接口
import { getAgreement, updateAgreement } from '@/api/basics'
export default {
  data() {
    return {
      tabVal: 'THE_SERVICE_AGREEMENT',
      tabList: [
        { label: '服务协议', value: 'THE_SERVICE_AGREEMENT' },
        { label: '隐私保护协议', value: 'PRIVACY_PROTECTION_AGREEMENT' },
        { label: 'VIP会员服务协议', value: 'VIP_MEMBERSHIP_SERVICE_AGREEMENT' },
        { label: '认证规范', value: 'CERTIFICATION_STANDARD' },
        { label: '运营规范', value: 'CERTIFICATION_STANDARD' },
        { label: '用户注销须知', value: 'CERTIFICATION_STANDARD' }
      ],
      editor: ''
    }
  },
  mounted() {
    const editor = new E('#div1')
    this.editor = editor
    this.editor.create()
    this.getContent()
  },
  methods: {
    // 请求协议信息
    getContent() {
      getAgreement({ code: this.tabVal }).then((res) => {
        this.editor.txt.html(res.data.settingContent)
      })
    },
    // tab切换
    tabClick(e) {
      this.getContent()
    },
    // 保存协议请求
    async submitForm() {
      await updateAgreement({ code: this.tabVal, content: this.editor.txt.html() }).then((res) => {
        this.$message({ message: '保存成功', type: 'success' })
      })
    }
  }
}
</script>

<style>
/* .w-e-text-container{
  height: 650px !important;
} */
#protoColSetContent{
  padding: 22px 100px;
}
#div1{
  height: 100%;
}
</style>
